<!-- components/mpopup-header-item.vue -->
<template>
  <view 
    class="mpopup-body-thead2" 
    :style="{
      height: computedHeight,
      borderBottom: showBottomBorder ? '1px solid #757575' : 'none'
    }"
  >
    <view class="mpopup-body-thead-name">
      <text class="label-text">{{ label }}</text>
    </view>
    <view class="mpopup-body-thead2-other">
      <view class="content-wrapper">
        <slot>{{ value }}</slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'mpopup-header-item',
  props: {
    // 新增底部边框控制
    showBottomBorder: {
      type: Boolean,
      default: false
    },
    height: {
      type: [String, Number],
      default: 'auto'
    },
    label: {
      type: String,
      default: '标题'
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  computed: {
    computedHeight() {
      if (typeof this.height === 'number') return `${this.height}px`
      if (typeof this.height === 'string' && this.height.includes('rpx')) {
        return this.height
      }
      return this.height || 'auto'
    }
  }
}
</script>

<style scoped>
/* 优化后的样式 */
.mpopup-body-thead2 {
  display: flex;
  min-height: 60px;
  background: #e9f1fe;
  border: 1px solid #757575;
  border-bottom: none; /* 默认不显示底部边框，由 prop 控制 */
}

.mpopup-body-thead-name {
  flex: 0 0 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #757575;
  padding: 0 12px;
  box-sizing: border-box;
}

.mpopup-body-thead2-other {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-wrapper {
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: white;
}

.label-text {
  text-align: center;
  word-break: break-all;
}
</style>